<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>闸机进出列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
    <style type="text/css">
        .layui-table-cell{height:40px;line-height:40px;}
    </style>
</head>
<body >

<blockquote class="layui-elem-quote quoteBox mod_default_box">
    <form class="layui-form">
        <div class="layui-inline">
            <div class="layui-form-label">卡号</div>
            <div class="layui-input-inline">
                <input type="text" id="cardNo" name="cardNo" placeholder="请输入卡号" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-form-label">用户姓名</div>
            <div class="layui-input-inline">
                <input type="text" id="uname" name="uname" placeholder="请输入用户姓名" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-inline">
            <input type="hidden" id="gateId" name="gateId" class="layui-input" />
            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="search-submit">
                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
        </div>
    </form>
</blockquote>

<!--数据列表-->
<table class="layui-hide" id="dataTable" lay-filter="data-table"></table>

<script src="../../js/layui/layui.js"></script>
<script src="../../js/layui/layui.all.js"></script>
<script src="../../js/token.js"></script>
<script src="../../js/config.js"></script>

<script>

    //url 传参
    function GetQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var a = decodeURI(window.location.search);
        var r = a.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
        if(r!=null)return  unescape(r[2]); return null;
    }

    window.onload = function(){
        var $ = layui.$;
        $("input[name='gateId']").val(GetQueryString("id"));
    }


    layui.use(['table','form'], function() {
        var $ = layui.$;
        var dataTable = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        dataTable.render({
            elem: '#dataTable'
            , id: 'data-table-id'//重载需要
            , url: HOST+'gate/getRecordsByPage?gateId='+$("#gateId").val()
            , title: '闸机进出记录'
            , cols: [[
                {type: 'numbers',title: '序号'}
                , {field: 'cid', align: 'center',width : 165, title: '卡号'}
                , {field: 'uname', align: 'center',width : 165, title: '用户姓名'}
                , {field: 'type', align: 'center',width : 165, title: '类型',templet:function(d){
                            if(d.type==1){
                                return "离开";
                            }else{
                                return "进入";
                            }
                    }}
                , {field: 'gtime', align: 'center',width : 165, title: '时间'}
                , {field: 'doorno', align: 'center',width : 165, title: '闸门号'}
            ]]
            , page: true
            ,page: {
                curr: layui.data("data_page").index
            },
            done:function (res, curr, count) {
                layui.data("data_page", {
                    key: 'index',
                    value: curr
                });
            }
        });

        //搜索操作
        form.on('submit(search-submit)', function (data) {
            table.reload('data-table-id', {
                where: {
                    "cardNo": data.field.cardNo,
                    "uname":data.field.uname
                }
                , page: {
                    curr: 1
                }
            });
            return false;
        });

    });
</script>
</body>
</html>